Give code blocks a header with a language and copy button - #3317

The workflow lints only the files a branch changed, so touching these surfaced
93 violations that were already there. None came from this branch: the same
files on main report the same errors.

Most were mechanical and went through markdownlint --fix. The rest needed a
decision:

- The expanded-properties table in certificate-variables was missing its
  trailing pipes and its third column, so twelve rows were losing data. It is
  rebuilt with every row filled in, and `header\footer` reads header/footer.
- Six fences had no language. They are `text` now, with a label saying what the
  service message does.
- output-variables used **PowerShell**, **C#**, **Bash**, **F#** and **Python3**
  as headings above their fences. The section heading already names the
  language and the block header now shows it, so the emphasis is gone and each
  fence carries a label instead.
- The two certificate screenshots have alt text.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

The frame, header, label and language were being built by JavaScript after the
page loaded. With scripting off, and in the window before hydration, a code
block was bare text on the page background: the border, radius and padding used
to sit on <pre> and now sit on the wrapper that script created.

A Shiki transformer emits the whole shell instead, including the copy button.
The copy handler is delegated at the document level, so it finds a statically
rendered button by the same selector.

Shiki, and not rehype, because plugins registered through `markdown.processor`
never reach .mdx pages. rehypeWbr adds 18 <wbr> elements to the kubernetes-agent
permissions page and none to kustomize.mdx, which has eight matches for it.

code-blocks.js drops from 431 lines to 327: the wrapping, the copy button
markup and the language table all go. It keeps copying, collapsing, and folding
a <details data-group> set into one block with a language menu, which merges
sibling blocks and so cannot be done per-block at build time.

Two tests cover the shell with scripting disabled.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Both had their own copy of the same fifty-five lines: the revert timer, the
tooltip swap, the live region, and the delegated click. The only thing that
differed was the string each one copies.

copy-button.js takes a selector and a function that reads the text, so a caller
is left with just that function. A button's own data-tooltip is its resting
label, which keeps "Copy URL" on the heading and "Copy to clipboard" on the
code block, and the two share one live region instead of one each.

headers.js goes from 125 lines to 52, code-blocks.js from 327 to 256.

copy-markdown.js stays as it is. It fetches the page over the network before
writing, so it needs the execCommand fallback and cannot read its text
synchronously, which is what keeps the clipboard write inside Safari's user
activation.

The heading button had no test. It has three now, covering both callers.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

The menu was a <details> with a hand-built option list, and eighteen of its
lines re-implemented Escape-to-close and click-away-to-close. A <select> comes
with those, plus keyboard navigation, focus handling and the mobile picker.

code-blocks.js drops from 256 lines to 201, and the CSS loses the popup panel
along with it.

The trigger still matches the design. The list it opens is the browser's, so
that part no longer matches the Figma panel: worth Mandy's eye before this
merges.

The caret is a mask on a wrapper span, since a <select> renders no
pseudo-element of its own and a background image cannot follow the theme.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

The switcher had its own caret-down.svg. The Button component and the copy
markdown menu both draw theirs from the FontAwesome glyph, so this does too and
the asset goes.

Rebasing also turned up a conflict git could not see. Main now sets
`margin-block` on `.page-content :is(pre, figure)`, and every <pre> sits inside
a code block, so the code was pushed away from its own header. The rule points
at .code-block instead, which is the element that wanted the spacing, and the
block drops the 1rem it was setting for itself.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

The old module made every <pre> focusable so a long line could be scrolled
without a mouse. Nothing scrolls: `white-space: break-spaces` wraps the code,
and none of the 43 blocks sampled across four pages overflow their box.

The attribute still earns its place on a collapsed block, where the code is the
only thing in the body that can take focus and focus is what opens it. So it
goes on there and nowhere else, which is around 1,500 fewer tab stops.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

The fade was 59px and did not start until 60% down it, so it only really acted
over the last 24px and the code read as simply ending. It is 7.5rem now and
fades from its own top edge.

Under it sits a Show more button that becomes Show less. That is what carries
the message, and it is also the keyboard route in, so the <pre> no longer needs
a tab stop and the focus handler that stood in for one is gone.

Opening is one way apart from that button. Collapsing when a click landed
elsewhere pulled the page up by the height of the block, which moved everything
under the reader and lost their place. Collapsing from the button scrolls the
block back into view for the same reason.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>